<template>
  <a-modal title-align="start" title="编辑属性" :mask-closable="false" v-model:visible="showvisible" @cancel="showvisible = false" :width="800">
    <a-space>
      <a-input v-model="editSearchstr" allow-clear style="width: 200px" @clear="searchAttList" placeholder="请输入属性值" />
      <a-button class="gray-outline" @click="searchAttList">搜索</a-button>
    </a-space>

    <a-table :pagination="false" class="table-single-line mt5" v-model:selected-keys="editInfo.selKey" row-key="name" :row-selection="{ type: 'checkbox', showCheckedAll: true, onlyCurrent: false, width: 20 }" :data="attrOptions" :scroll="{ x: '100%', y: 300 }">
      <template #columns>
        <a-table-column title="属性值" #cell="{ record }" :width="500">
          {{ record.name }}
        </a-table-column>
      </template>
    </a-table>

    <div class="pagination-footer mt10">
      <a-pagination size="mini" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size :total="editInfo.options.length" :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @page-size-change="sizeChange" @change="changePage" />
    </div>

    <template #footer class="modal-footer">
      <a-button @click="showvisible = false">取消</a-button>
      <a-button type="primary" @click="confirm">确定</a-button>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
  import { defineComponent, ref, computed, onMounted } from 'vue'
  import { attributeGetById } from '@/api/product'
  import _ from 'lodash-es'
  let props = defineProps(['modelValue', 'info', 'shopId'])
  let emits = defineEmits(['save', 'update:modelValue'])
  let showvisible = computed({
    get() {
      return props.modelValue
    },
    set(val) {
      emits('update:modelValue', val)
    },
  })

  let editSearchstr = ref('')
  let attrOptions: any = ref([])
  let initAttDataList: any = ref([])
  let editInfo = ref(_.cloneDeep(props.info))
  // let editInfo = ref(props.info)
  let pageNation = ref({ pageNum: 1, pageSize: 50 })
  const searchAttList = () => {
    if (editSearchstr.value) {
      editInfo.value.options = initAttDataList.value.filter((e: any) => e.indexOf(editSearchstr.value) > -1)
    } else {
      editInfo.value.options = initAttDataList.value
    }
    pageNation.value.pageNum = 1
    changeSizeToEditAttData()
  }
  const sizeChange = (val: number) => {
    pageNation.value.pageNum = 1
    pageNation.value.pageSize = val
    changeSizeToEditAttData()
  }

  const changePage = (val: number) => {
    pageNation.value.pageNum = val
    changeSizeToEditAttData()
  }

  const changeSizeToEditAttData = () => {
    attrOptions.value = []
    let arr = editInfo.value.options.slice(pageNation.value.pageSize * (pageNation.value.pageNum - 1), pageNation.value.pageSize * pageNation.value.pageNum)
    arr.forEach((e: any) => {
      let obj = { name: e }
      attrOptions.value.push(obj)
    })
  }

  const confirm = () => {
    emits('save', editInfo.value)
    showvisible.value = false
  }

  const getAttributeGetById = async () => {
    let id = `${props.shopId}-${editInfo.value.id}`
    const res: any = await attributeGetById({ id })
    if (res) {
      let arr = res?.data?.termList || []
      initAttDataList.value = arr.map((e: any) => {
        return e?.dataFromRestApi?.name
      })
    }
  }

  onMounted(() => {
    getAttributeGetById()
    changeSizeToEditAttData()
  })
</script>

<style lang="less" scoped></style>
